import * as React from 'react';
import * as PropTypes from 'prop-types';
import styles from './styles/index.less';
import CaseTable, { CaseTableState } from '@/pages/routes/table/CaseTable';
import QueryForm, { QueryObject } from '@/pages/routes/table/QueryForm';
import { queryCaseList } from '@/pages/routes/table/service';
import { message, Modal } from 'antd';
import { CaseDataItem } from './interface';
import NewPlan from '@/pages/routes/table/NewPlan';
import FormInfo from '@/pages/routes/table/FormInfo';
import moment from 'moment';

export interface DispatchPageProps {}

export interface DispatchPageState {
  dataSource: CaseDataItem[];
  page: number;
  pageSize: number;
  total: number;
  loading: boolean;
  editVisible: boolean;
}

class DispatchPage extends React.Component<DispatchPageProps, DispatchPageState> {
  public static propTypes = {};
  public static defaultProps = {};
  public state: DispatchPageState = {
    dataSource: [],
    loading: false,
    page: 1,
    pageSize: 10,
    total: 0,
    editVisible: false,
  };
  private initialQueryObj: QueryObject = {
    name: '',
    type: -1,
    area: -1,
    createUser: -1,
    bdh: '',
    updateDate: ['', ''],
    startDate: ['', ''],
    endDate: ['', ''],
  };

  public componentDidMount() {
    this.loadData();
  }

  public QueryData = (data: any) => {
    console.log(data);
  };

  public render() {
    const { dataSource, loading, total, page, pageSize } = this.state;
    const tableProps = { dataSource, loading, total, page, pageSize };
    return (
      <div className={styles.page}>
        <QueryForm onQuery={this.handleQuery} />
        <NewPlan />
        <CaseTable
          {...tableProps}
          onPageChange={(page, pageSize) => {
            this.setState({ pageSize, page }, () => {
              this.loadData();
            });
          }}
          onEdit={(record) => {
            this.setState({ editVisible: true });
          }}
        />
        <Modal
          title="添加调度方案"
          width={800}
          visible={this.state.editVisible}
          onOk={() => this.handleOk()}
          onCancel={() => {
            this.setState({ editVisible: false });
          }}
        >
          <FormInfo
            isEdit
            initialValue={{
              name: 'junjun',
              type: 1,
              area: -1,
              startDate: moment('2021-11-14'),
              endDate: moment(),
              ts: [
                { id: '-1638161955315', ownNet: '', dbh: '', description: '哈哈哈哈', checked: true },
                { id: '-1638161917769', ownNet: '', dbh: '', description: '没有人', checked: true },
                { id: '-1638161915587', ownNet: '', dbh: '', description: '一个也不能少', checked: true },
              ],
              hf: [
                { id: '-1638161955315', ownNet: '', dbh: '', description: '哈哈哈哈', checked: true },
                { id: '-1638161917769', ownNet: '', dbh: '', description: '没有人', checked: true },
                { id: '-1638161915587', ownNet: '', dbh: '', description: '一个也不能少', checked: true },
              ],
              scdd: '株洲车载有限公司，株洲市路虎环境卫生管理处',
              gwyx: '株洲车载有限公司，株洲市路虎环境卫生管理处',
              mark: '株洲车载有限公司，株洲市路虎环境卫生管理处',
              bmzz: [],
            }}
          />
        </Modal>
      </div>
    );
  }

  private handleQuery = (options: QueryObject) => {
    console.log('我是父组件:', options);
    this.initialQueryObj = { ...options };
    this.setState({ page: 1 }, () => {
      this.loadData();
    });
  };

  private async loadData() {
    try {
      const options = this.initialQueryObj;
      const { page, pageSize } = this.state;
      this.setState({ loading: true });
      const { code, data } = await queryCaseList({ ...options, page, pageSize });
      if (code === 0) {
        const { list, total } = data;
        this.setState({ dataSource: list, total, loading: false });
        return;
      }
      message.error('获取方案列表失败了');
      this.setState({ loading: false });
    } catch (e) {
      console.error(e);
      message.error('获取方案列表失败了');
      this.setState({ loading: false });
    }
  }

  private handleOk() {
    // 编辑逻辑

    // 成功后
    this.setState({ editVisible: false });
  }
}

export default DispatchPage;
